<template>
  <div class="power">
    <div class="usercon">
      <div class="content">
        <el-breadcrumb separator="/">
          <el-breadcrumb-item :to="{ path: '/Home' }">首页</el-breadcrumb-item>
          <el-breadcrumb-item>商品管理</el-breadcrumb-item>
          <el-breadcrumb-item>分类参数</el-breadcrumb-item>
        </el-breadcrumb>
        <div style="margin-top:10px;">
          <el-alert title="注意:只允许为第三级分类设置参数" type="warning" show-icon :closable="false"></el-alert>
        </div>
        <div class="block" style="margin-top:15px;">
          <span class="demonstration" style="font-size:14px;">请选择商品分类</span>
          <el-cascader
            expand-trigger="hover"
            :options="option"
            :show-all-levels="false"
            :props="{
                    value: 'cat_id',
                    label: 'cat_name',
                    children: 'children',
                    expandTrigger: 'hover'
                }"
          ></el-cascader>
        </div>
        <template>
          <el-tabs v-model="activeName">
            <el-tab-pane label="动态参数" name="first">
              <el-button type="primary" style="padding: 7px 15px;font-size: 12px;">设置动态参数</el-button>
                <el-table ref="singleTable" :data="optchild" style="width: 100%;">
                <el-table-column type="expand">
                    <template slot-scope="props">
                    <el-form label-position="left" inline class="demo-table-expand">
                        <el-form-item>
                        <span>{{ props.row.authName }}</span>
                        </el-form-item>
                        <el-form-item>
                        <span>{{ }}</span>
                        </el-form-item>
                        <!-- <el-form-item label="商品 ID">
                        <span>{{ props.row.id }}</span>
                        </el-form-item>
                        <el-form-item label="店铺 ID">
                        <span>{{ props.row.shopId }}</span>
                        </el-form-item>
                        <el-form-item label="商品分类">
                        <span>{{ props.row.category }}</span>
                        </el-form-item>
                        <el-form-item label="店铺地址">
                        <span>{{ props.row.address }}</span>
                        </el-form-item>
                        <el-form-item label="商品描述"> 
                        <span>{{ props.row.desc }}</span>
                        </el-form-item>-->
                    </el-form>
                    </template>
                </el-table-column>
                <el-table-column type="index" width="50"></el-table-column>
                <el-table-column label="属性名称" prop="cat_name" width="180"></el-table-column>
                <el-table-column label="操作" prop="roleDesc"></el-table-column>
                    <!-- <el-button type="primary" plain size="mini" is-circle class="btn">
                    <i class="el-icon-edit"></i>
                    </el-button>
                    <el-button type="danger" plain size="mini" is-circle class="btn">
                    <i class="el-icon-delete"></i>
                    </el-button>
                    <el-button type="success" plain size="mini" is-circle class="btn">
                    <i class="el-icon-check"></i>
                    </el-button> -->
                </el-table-column>
                </el-table>
            </el-tab-pane>
            <el-tab-pane label="静态参数" name="second"></el-tab-pane>
          </el-tabs>
        </template>

      </div>
    </div>
  </div>
</template>
      </div>
    </div>
  </div>
</template>
     

<script>
export default {
  data() {
    return {
      option: [],
      optchild:[],
      selectedOptions2: [],
      activeName: "first"
    };
  },
  methods: {
    getparam() {
      this.$http("categories", {}, "get", {}).then(res => {
        this.option = res.data;
      });
    },
    getchild() {
      this.$http("categories", {}, "get", {}).then(res => {
        this.optchild = res.data.data;
      });
    }
  },
  created() {
      this.getparam();
    this.getchild();
  }
};
</script>

<style scoped lang="scss">
.power {
  width: 100%;
  height: 100%;
  display: flex;
  overflow-y: scroll;
  .usercon {
    padding: 20px;
    margin: 60px 0 0 199px;
    flex: 1;
  }
  .content {
    height: 100%;
    background: #fff;
    box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
    border-radius: 4px;
    overflow: hidden;
    border: 1px solid #ebeef5;
    padding: 20px;
  }
}
</style>
